<template>
  <div id="manageItemApply">
    <template>
      <template  style="margin-top: 15px;width: 30%">
        <el-input placeholder="物资名称" @keyup.native.enter="find(applyName)" v-model="applyName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="find(applyName)"></el-button>
        </el-input>
      </template>
      <!--      <div style="margin-top: 20px">-->
      <!--        <el-button @click="addItem()">新增</el-button>-->
      <!--        <el-button @click="deleteItemList()">删除</el-button>-->
      <!--      </div>-->

      <el-table
              ref="multipleTable"
              :data="applyDetailVO"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px"
              :border=true>

        <el-table-column
                label="编号"
                width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="itemName"
                label="物资名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="count"
                label="申请数量"
                width="250">
        </el-table-column>
        <el-table-column
                prop="username"
                label="申请人"
                width="250">
        </el-table-column>
        <el-table-column
                prop="applyFile"
                label="申请文件"
                width="250">
        </el-table-column>

        <el-table-column
                prop="checkReply"
                label="审核回复"
                width="250">
        </el-table-column>
        <el-table-column
                prop="checkState"
                label="审核状态"
                width="250">
          <template slot-scope="scope">
            <!--scope.row代表当前遍历的数组中的对象-->
            {{scope.row.checkState == 0 ? "拒绝捐献" : scope.row.checkState == 1 ? "同意捐献": '未审核'}}
          </template>
        </el-table-column>
        <el-table-column
                prop="checkName"
                label="审核人员"
                width="250">
        </el-table-column>
        <el-table-column
                prop="gmtCreate"
                label="申请时间"
                width="250">
        </el-table-column>
        <el-table-column
                label="操作"
                show-overflow-tooltip
                width="500px">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" round="" @click="checkDonation(scope.row.id,1)">同意捐献</el-button>
            <el-button type="warning" icon="el-icon-edit" round="" @click="checkDonation(scope.row.id,0)">拒绝捐献</el-button>
          </template>
        </el-table-column>
      </el-table>

    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        applyName:'',
        name:'',
        img:'',
        applyDetailVO: [],
        multipleSelection: [],
        user:{
          id:"",
          username:"",
          name:"",
          idNumber:"",
          age:"",
          phone:"",
          email:"",
          isEnable:"",
          roleId:""
        },
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        // 获取缓存中的user对象
        this.user = JSON.parse(localStorage.getItem('user'))
        //发请求获取所有分类信息
        console.log("发送请求之前可以获取到的JWT======" + localStorage.getItem('JWT_TOKEN'))
        let url = "http://176.17.10.223:18085/apply/selectList?keyword=";
        this.axios.get(url).then( (response)=> {
          console.log("拿到的数据======" + response.data.data)
          this.applyDetailVO = response.data.data;
        })
      },

      checkDonation(checkId,checkState){
        console.log("审核人员===========" + localStorage.getItem('user'))
        //弹出输入框
        this.$prompt("请输入审核回复内容","提示",{
          confirmButtonText:"确定",
          cancelButtonText:"取消"
        }).then( (object)=> {
          console.log("分类名称:"+ object.value);
          let checkReply = object.value;
          if (checkReply==null||checkReply.trim()==""){
            this.$message.error("审核回复不能为空");
            return;
          }
          let url = 'http://176.17.10.223:18084/donation/update-admin'
          let data = 'id='+ checkId +
                  '&checkReply=' + checkReply +
                  '&checkState=' + checkState +
                  '&checkName=' + this.user.username;
          this.axios.post(url,data).then( (response) => {
            console.log("回复的内容为=============" + response.data.state)
            if (response.data.state===20000){
              this.$message({
                message: '审核成功',
                type: 'success'
              });
              location.reload();
            }else {
              this.$message.error(response.data.message);
            }
          })
          //catch方法如果不加 当点击取消时会报错.
        }).catch( () => {
          console.log("取消了");
        })
      },
      // 查找特定物资名称
      find(donationName){
        if (donationName != ''){
          let url = "http://176.17.10.223:18084/donation/selectList?keyword="+donationName;
          let data = 'keyword='+ donationName;
          this.axios.get(url).then( (response)=> {
            // 如果查询到的不是空数据
            if (response.data.data != null){
              // 先清空用户数组
              this.applyDetailVO=[];
              // 清空搜索的用户
              this.applyName = '';
              this.applyDetailVO = response.data.data;
            }else {
              this.$message({
                message: '该用户不存在',
                type: 'error'
              });
            }
          })
        }else {
          // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
          this.getData();
        }
      },
    },
  }
</script>
<style>
  .el-input-group{
    margin: 0 40%;
    position: center;
    width: auto;
  }
  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    width: 300px;
  }
</style>